<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>二维码生成</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/select.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.idTabs.min.js"></script>
<script type="text/javascript" src="js/select-ui.min.js"></script>
<script type="text/javascript" src="editor/kindeditor.js"></script>
<script type="text/javascript">
    KE.show({
        id : 'content7',
        cssPath : './index.css'
    });
    
  </script>
  
</head>
<style>
.filename{float:right;width:140px;height:30px;position: absolute;top:37%;right:35%;border:1px solid DARKGREY}
 img.palaroid {
       position:absolute;
       left:55%;
       top:12%;
       box-shadow:1px 1px 5px #333;
       border:solid #edf6fa;
       border-width:6px 6px 20px 6px;
       width:280px;
       height:250px;
       background:#fff;
     }
     img {
	      width:100%;
     }
</style>
<body style="background-color: #EBEBEB">

	<div class="place">
    <span>位置：</span>
    <ul class="placeul">
    <li><a href="index.html">首页</a></li>
    <li><a href="#">二维码生成</a></li>
    </ul>
    </div>
    
    <div class="formbody">
    
    
    <div id="usual1" class="usual"> 
    
    <div class="itab">
  	<ul> 
    <li><a href="#tab1" class="selected">文本内容</a></li> 
    <li><a href="#tab2">坐标系</a></li> 
    <li><a href="#tab3">网址链接</a></li> 
    
  	</ul>
    </div> 
  	<div id="tab1" class="tabson">   	
  		<div style="float: left;margin:0 10%">
  			<input id="content" type="hidden" />
  			<textarea id="content7" name="content7" style="width:700px;height:280px;visibility:hidden;"></textarea>
  			<a class="enter"style="margin:50px 300px" onclick="createQrText()">生成并保存</a>
  		</div>  
    	   <img class="palaroid" style="display:" id="qrImg"/>  	
    	   <a class="enter" id="downLoad" style="position: absolute;top:36.5%;;left:66%;float:left;display:none ">下载</a>
    	   <input class="filename" id="filename" style="display:none" type="text" placeholder="请输入文件名"/>
			
    </div> 
    
  	<div id="tab2" class="tabson">
    	<div style="float: left;margin:2% 10%">
    		<ul class="forminfo">
    			<li><label>X轴<b>*</b></label><input type="text" class="dfinput positionX" /></li>
   			 	<li><label>Y轴<b>*</b></label><input  type="text" class="dfinput positionY" /></li>
   			 	<li><label>楼层<b>*</b></label><input  type="text" class="dfinput floor" /></li>				 
   			 </ul>
   			 <a class="enter" style="margin:50px 200px" onclick="createQrPos()">生成并保存</a>
   		</div>
   		   <img class="palaroid" style="display:" id="qrImg2"/>  	
    	   <a class="enter" id="downLoad2" style="position: absolute;top:36.5%;;left:66%;float:left;display:none ">下载</a>
    	   <input class="filename" id="filename2" style="display:none" type="text" placeholder="请输入文件名"/>

    </div>  
    
    <div id="tab3" class="tabson">
    	<div style="float:left;margin:6% 10%">
    		<ul class="forminfo">
    			<li><label>链接<b>*</b></label><input type="text" class="dfinput webUrl" placeholder="http://"/><i>例：www.baidu.com</i></li>
    			
   				<li><a class="enter"style="margin:50px 200px" onclick="createQrUrl()">生成并保存</a></li>  				 
   			 </ul>
    	</div>
    	   <img class="palaroid" style="display:" id="qrImg3"/>  	
    	   <a class="enter" id="downLoad3" style="position: absolute;top:36.5%;;left:66%;float:left;display:none ">下载</a>
    	   <input class="filename" id="filename3" style="display:none" type="text" placeholder="请输入文件名"/>
    </div> 
       
	</div> 
 
	<script type="text/javascript"> 
      $("#usual1 ul").idTabs(); 
    </script>
    
    <script type="text/javascript">
	$('.tablelist tbody tr:odd').addClass('odd');
	</script>                 
    </div>
    
<script type="text/javascript">

<!--文本值二维码创建与下载 start-->
//创建
function createQrText(){
	var content7 = document.getElementById("content7").value=KE.util.getData('content7');	
	var content=$("#content").val(content7);	
	var value=$("#content").val();//获取文本区的值
	var type=1;

	var jsonstr={"qrType":type,"content":value};
	if(value==""){
		alert("请输入要生成的文本内容！");
	}else{
		$.ajax({
			url:"/Servicing/qr/getQr",
			data:jsonstr,
			dataType:"text",
			type:"POST",
			success:function(result){
				$('#qrSpan').css("display","none");			
				$('#qrImg').attr("src","data:image/png;base64,"+result);
				$('#filename').css("display","");
				$('#downLoad').css("display","");
	
			}
		})
	}
}

//下载
function oDownLoad(url) {
	//如何浏览器为IE则直接调用downloadFile
	var filename=$('#filename').val(); //下载的文件名
	if(filename!=""){
	    if (myBrowser() === "IE") { //IE  //|| myBrowser() === "Edge"
	        odownLoad.href = "#"; 
	        downloadFile(filename+".jpg", url);
	    } else { //不是IE,创建一个Blob对象，然后再二进制化
	        var blob = base64Img2Blob(url);
	        url = window.URL.createObjectURL(blob);
	        odownLoad.href = url;
	        odownLoad.download = filename+".jpg";
	    }
	}else{
		alert("请输入下载的文件名！");
	}
}
var odownLoad = null;
$(function () {
// id="download"是一个a标签
 odownLoad = document.getElementById("downLoad");
    odownLoad.onclick = function () {
    	var baes=$('#qrImg')[0].src; 
        oDownLoad(baes);
    }
});
<!--文本值二维码创建与下载 end-->


<!--坐标值二维码创建与下载 start-->
//创建
function createQrPos(){
	var positionX=$(".positionX").val();//获取坐标区的值
	var positionY=$(".positionY").val();
	var floor=$(".floor").val();	
	var value="positionX："+positionX+","+"positionY："+positionY+","+"floor："+floor;
	var type=2;
	var jsonstr={"qrType":type,"content":value};
	if(positionX!=""&&positionY!=""&&floor!=""){
		$.ajax({
			url:"/Servicing/qr/getQr",
			data:jsonstr,
			dataType:"text",
			type:"POST",
			success:function(result){
				$('#qrSpan2').css("display","none");			
				$('#qrImg2').attr("src","data:image/png;base64,"+result);
				$('#filename2').css("display","");
				$('#downLoad2').css("display","");	
			}
		})
	}else{
		alert("请确保数据完整性");
	}
}
//下载
function oDownLoad2(url) {
	//如何浏览器为IE则直接调用downloadFile
	var filename=$('#filename2').val(); //下载的文件名
	if(filename!=""){
	    if (myBrowser() === "IE") { //IE  //|| myBrowser() === "Edge"
	        odownLoad2.href = "#"; 
	        downloadFile(filename+".jpg", url);
	    } else { //不是IE,创建一个Blob对象，然后再二进制化
	        var blob = base64Img2Blob(url);
	        url = window.URL.createObjectURL(blob);
	        odownLoad2.href = url;
	        odownLoad2.download = filename+".jpg";
	    }
	}else{
		alert("请输入下载的文件名！");
	}
}
var odownLoad2 = null;
$(function () {
 odownLoad2 = document.getElementById("downLoad2");
    odownLoad2.onclick = function () {
    	var baes=$('#qrImg2')[0].src; 
        oDownLoad2(baes);
    }
});
<!--坐标值二维码创建与下载  end-->


<!--网址链接二维码创建与下载  start-->
//创建
function createQrUrl(){
	var webUrl=$(".webUrl").val();//获取网址链接取的值	
	var type=3;
	//匹配输入的是否为一个网址链接
	var regs=/^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/;
	if(webUrl!=""){
		if(!regs.test("http://"+webUrl)){
			alert("请输入正确的网址！例如:www.baidu.com");
		}else{
			var value="http://"+webUrl;
		 	var jsonstr={"qrType":type,"content":value};
				$.ajax({
					url:"/Servicing/qr/getQr",
					data:jsonstr,
					dataType:"text",
					type:"POST",
					success:function(result){
						$('#qrSpan3').css("display","none");			
						$('#qrImg3').attr("src","data:image/png;base64,"+result);
						$('#filename3').css("display","");
						$('#downLoad3').css("display","");	
					}
				})

		}
	}else{
		alert("网址输入不能为空！");
	}
}
//下载
function oDownLoad3(url) {
	//如何浏览器为IE则直接调用downloadFile
	var filename=$('#filename3').val(); //下载的文件名
	if(filename!=""){
	    if (myBrowser() === "IE") { //IE  //|| myBrowser() === "Edge"
	        odownLoad3.href = "#"; 
	        downloadFile(filename+".jpg", url);
	    } else { //不是IE,创建一个Blob对象，然后再二进制化
	        var blob = base64Img2Blob(url);
	        url = window.URL.createObjectURL(blob);
	        odownLoad3.href = url;
	        odownLoad3.download = filename+".jpg";
	    }
	}else{
		alert("请输入下载的文件名！");
	}
}
var odownLoad3 = null;
$(function () {
 odownLoad3 = document.getElementById("downLoad3");
    odownLoad3.onclick = function () {
    	var baes=$('#qrImg3')[0].src; 
        oDownLoad3(baes);
    }
});
<!--网址链接二维码创建与下载  end-->

<!--公共下载调用方法-->
//判断浏览器类型 
function myBrowser() {
  var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
  var isOpera = userAgent.indexOf("OPR") > -1; if (isOpera) { return "Opera" }; //判断是否Opera浏览器
  if (userAgent.indexOf("Firefox") > -1) { return "FF"; } //判断是否Firefox浏览器 
  if (userAgent.indexOf("Trident") > -1) { return "IE"; } //判断是否IE浏览器 
  if (userAgent.indexOf("Edge") > -1) { return "Edge"; } //判断是否Edge浏览器  
  if (userAgent.indexOf("Chrome") > -1) { return "Chrome"; }// 判断是否Chrome浏览器 
  if (userAgent.indexOf("Safari") > -1) { return "Safari"; } //判断是否Safari浏览器
}
//base64转blob
function base64Img2Blob (code) {
	let parts = code.split(';base64,');
	let contentType = parts[0].split(':')[1];
	let raw = window.atob(parts[1]);
	let rawLength = raw.length;
	let uInt8Array = new Uint8Array(rawLength);
	for (let i = 0; i < rawLength; ++i) {
		 uInt8Array[i] = raw.charCodeAt(i);
	}
	return new Blob([uInt8Array], {type: contentType});
}
//支持IE11
function downloadFile(fileName, content) {
  var blob = base64Img2Blob(content);
  //支持IE11
  window.navigator.msSaveBlob(blob, fileName);
}

</script>
</body>
</html>
